<template>
  <div class="diagnosis_hishtory" id="diagnosis_hishtory">
    <div class="diagnosis_hishtory-wrap mt_14">
      <div class="search-wrap_record">
        <div>
          <div data-v-378b4e67 class="notice-box"></div>
          历史诊断记录
        </div>
        <div
          class="record-right"
          @click="$router.push('/inAnalysis/diagnosisSearch')"
        >
          重新诊断<img src="@/assets/li/more.png" />
        </div>
      </div>
      <div class="search-wrap_list">
        <div class="wrap_list-title">
          <div class="title1 public1">查询日期</div>
          <div class="title2 public2">达人</div>
          <div class="title3 public3">操作</div>
        </div>
        <div
          class="wrap_list-content"
          v-for="(item, index) in HistoryList"
          :key="index"
        >
          <div class="time public1">{{ item.createTime }}</div>
          <div class="img-box public2">
            <img :src="item.logo" alt />
            {{ item.nickName }}
          </div>
          <div class="details public3">
            <button class="btn02" v-if="item.status != 1">正在诊断</button>
            <div
              class="btn"
              @click="lookDetails(index)"
              v-if="item.status == 1"
            >
              查看详情
            </div>
          </div>
        </div>
        <div class="empty" v-if="!HistoryList">
          <img src="@/assets/liu/zw.png" />
          <p>目前没有可以查看的数据哟~</p>
        </div>
      </div>
      <div class="pageBox" v-if="HistoryList">
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="pageIndex"
          :hide-on-single-page="true"
          @current-change="toSearchGoods"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DiagnosisHishtory",

  data() {
    return {
      diagnosisId: 0,
      authorId: 0,
      total: 1, //总条数
      pageIndex: 1, //当前页数
      pageSize: 10, // 页面默认几条数据
      HistoryList: [],
      timename: ""
    };
  },
  props: {},
  watch: {},
  components: {},
  computed: {},
  created() {
    this.getHistoryList();
    this.timename = setInterval(() => {
      this.getHistoryList();
    }, 30000);
    document.title = "账号诊断&智能分析服务平台-掌上精选";
  },

  mounted() {},
  methods: {
    toSearchGoods(e) {
      this.pageIndex = e;
      this.getHistoryList();
    },
    getHistoryList() {
      this.$axios({
        method: "get",
        url: "/api/author/diagnosishis",
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.total = res.data.count;
        this.HistoryList = res.data.data;
        if (this.HistoryList) {
          let a = this.HistoryList.every(item => {
            return item.status == 1;
          });
          if (a) {
            clearTimeout(this.timename);
          }
        }
      });
    },
    lookDetails(i) {
      this.diagnosisId = this.HistoryList[i].id;
      this.authorId = this.HistoryList[i].authorId;
      localStorage.setItem("diagId", this.diagnosisId);
      localStorage.setItem("authorId", this.authorId);
      // this.$store.commit("diagId", this.diagnosisId);
      // this.$store.commit("authorId", this.authorId);
      this.$router.push("/inAnalysis/diagnosisResult");
    }
  }
};
</script>

<style scoped lang="less">
.diagnosis_hishtory-top {
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 4px;
  font-size: 22px;
  color: #fff;
  background-color: skyblue;
}
.diagnosis_hishtory-wrap {
  // min-height: 822px;
  min-height: calc(100vh - 62px);
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  background-color: #fff;
  padding: 20px;
  .search-wrap_record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .notice-box {
      display: inline-block;
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
      margin-top: 1px;
    }
    > div {
      font-size: 16px;
      color: #222;
      font-weight: 600;

      display: flex;
      align-items: center;
    }
    .record-right {
      font-size: 14px;
      color: #fd7f2c;
      font-weight: normal;
      cursor: pointer;
      > img {
        width: 7px;
        height: 11px;
        margin-left: 5px;
        margin-top: 1px;
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
}
.search-wrap_list {
  min-height: 460px;
  .public1 {
    width: 180px;
    color: #222222;
    text-align: center;
  }
  .public2 {
    width: 720px;
    font-size: 14px;
    margin-left: 90px;
  }
  .public3 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .time {
    font-family: DINAlternate-Bold;
  }
}
.wrap_list-title {
  height: 48px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  color: #555;
  background-color: #f5f9ff;
  .title1 {
    font-size: 14px;
    color: #555;
  }
  .title3 {
    font-size: 14px;
    color: #555;
  }
}
.wrap_list-content {
  height: 68px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f9ff;
  .btn {
    width: 88px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    color: #fd7f2c;
    border: 1px solid #fd7f2c;
    cursor: pointer;
  }
  .btn02 {
    width: 88px;
    height: 32px;
    border-radius: 4px;
    border: solid 1px #e5e5e5;
    font-size: 14px;
    color: #555;
  }
  .btn:hover {
    border-color: #ff924b;
    color: #ff924b;
  }

  .img-box {
    font-weight: 600;
    img {
      width: 50px;
      height: 50px;
      border-radius: 500px;
      margin-right: 4px;
    }
  }
}
.wrap_list-content:hover {
  background-color: #fffaf7;
}
</style>
